<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=noitle>移动端事件处理</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        html,
        body {
            height: 500%;
            background: -webkit-linear-gradient(top left, lightblue, rgb(238, 171, 83));
        }

        .box {
            width: 100px;
            height: 100px;
            background: #DDD;
            transition: transform 1s;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        /*
         知识点：
         @1 在苹果手机上进行滑动，往往会触发页面默认的滚动行为「边界反弹效果」，
         一般我们需要禁止其默认行为！！但是这样的行为，也会禁止掉页面在手指滑动中的“滚动条”滚动效果！！
         @2 元素.addEventListener(事件,方法,?)
           ?可以是true/false：控制哪个阶段触发
           ?可以是对象：
             capture:false 设置为true，则在捕获阶段触发「false是冒泡阶段」
             once:false 设置为true后，事件只绑定一次「触发一次自动移除事件绑定」
             passive:false 设置为true后，则方法中不能在基于preventDefault阻止默认行为了
         @3 新版本谷歌浏览器，把window/document/body的touch相关事件，的passive都默认设置为了true「禁止阻止默认行为」
         */
    </script>

    <script>
        /*
        如果移动端，我们依然基于click事件做处理，就要想办法解决其300ms延迟的问题 
           fastclick.js
           原理：基于事件委托（委托给BODY），把click替换为touch处理！！
        */
    </script>

    <script>
        /*
         专业的事件库中，不仅仅有对点击操作的封装，还有对滑动、长按、缩放等多种行为操作的封装！！ 
           + zepto.js
           + hammer.js  http://hammerjs.github.io/api/
           + ...

         zepto被“誉为”移动端的JQ！
           + 正常情况下，JQ咋用，它就咋用，语法几乎一模一样！！
           + 如果遇到某个方法JQ能用，但是ZP不能用，那就说明ZP没有（因为其只实现JQ最常用的方法）！！
           + 不考虑IE内核浏览器的兼容，体积比JQ小很多！！
           + ZP支持移动端事件(它对移动端事件做了很多的封装)，而这些是JQ不具备的！！
             tap 点击
             singleTap 单击
             doubleTap 双击
             longTap 长按「750ms」
             swipe 滑动
             swipeLeft/Right/Down/Up 滑动方向的事件
             pinchIn/Out 缩放
             ...
         */
    </script>
    <script src="js/fastclick.js"></script>
    <script>
        // FastClick.attach(document.body)
        // const box = document.querySelector('.box')
        // box.onclick = function () {  
        //     this.style.transform = 'rotate(360deg)'
        // }

        // // 手指按下 ：记录手指的起始位置
        // box.ontouchstart = function(ev){
        //     /* 
        //      TouchEvent
        //       changedsTouches/touches 记录每一根手指在屏幕中的位置，touches在touchend中将不存在，所有我们一般用changedsTouches
        //     */
        //     let point = ev.changedTouches[0]
        //     this.startX = point.clientX
        //     this.startY = point.clientY
        //     this.isMove = false
        // }
        // //手指移动： 记录手指的最新位置【不是触发move就是移动，我们要判断误差值(一般是10px)】
        // box.ontouchmove = function(ev){
        //     let point = ev.changedTouches[0]
        //     this.changeX = point.clientX - this.startX
        //     this.changeY = point.clientY - this.startY
        //     if(Math.abs(this.changeX)>10 || Math.abs(this.changeY)>10){
        //         this.isMove = true
        //     }
        // }
        // // 手机离开 ：判断点击还是移动
        // box.ontouchend = function(ev){
        //     if(!this.isMove){
        //         // 点击
        //         this.style.transform = 'rotate(360deg)'
        //         return
        //     }
        //     // 滑动
        // }
    </script>
    <script src="js/zepto.min.js"></script>
    <script>
        /* 
        JQ：
            v1 经典版本「称王」：兼容所有浏览器
            v2 鸡肋版本：放弃了IE6~8的兼容，旨在处理移动端H5项目
            + 虽然是考虑了移动端，但是还要兼顾PC端，所以移动端也没处理多好「主推JQ Mobile」
            + Zepto的诞生，彻底压垮了v2版本
            v3 生不逢时：不兼容低版本浏览器，除了移动端的支持和之前一样，但是代码从精致和细节上，
            还有新技术的运用上都很棒！！！但是、但是，这个年代是vue和react的年代，JQ操作DOM的思想已经被out了！！
        */

        // $(".box").tap(function () {  
        //     $(this).css({
        //         transform:'rotate(360deg)'
        //     })
        // })
    </script>
    <script>
        document.addEventListener('touchmove',function (ev) {  
            ev.preventDefault()
        },{
            passive:false
        })
    </script>
</body>

</html>